<template>
  <div class="musicHeader">
    <header>
      <div class="out">
        <div class="left" :class="{active:currentTarget===0}" @click="currentTarget=0">新歌速递</div>
        <div class="right" :class="{active:currentTarget===1}" @click="currentTarget=1">新碟上架</div>
      </div>
    </header>
    <div class="naviagte">
      <div class="city">
        <span
          v-for="(item,index) in cityList"
          :key="index"
          :style="{color:currentCity===item?'#fff':'#878787'}"
          @click="currentCity = item"
        >{{item}}</span>
      </div>
      <div>
        <slot name="right" :currentTarget="currentTarget"></slot>
      </div>
    </div>
    <div>
      <slot name="main"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose, computed } from 'vue'
const currentTarget = ref(0)
const cityList = ['全部', '华语', '欧美', '日本', '韩国']
const currentCity = ref('全部')
const currentCityType = computed(() => {
  const citymenu = {
    全部: 0,
    华语: 7,
    欧美: 96,
    日本: 8,
    韩国: 16
  }
  return citymenu[currentCity.value]
})
const currentAreaType = computed(() => {
  const areamenu = {
    全部: 'ALL',
    华语: 'ZH',
    欧美: 'EA',
    韩国: 'KR',
    日本: 'JP'
  }
  return areamenu[currentCity.value]
})
defineExpose({ currentCityType, currentAreaType, currentTarget })
</script>

<style lang="scss" scoped>
.musicHeader {
  .naviagte {
    padding: 0 35px;
    display: flex;
    justify-content: space-between;
    color: #878787;
    font-size: 14px;
    font-weight: bold;
    .city {
      span {
        padding: 2px;
        margin-right: 30px;
        &:hover {
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    .out {
      width: 250px;
      height: 30px;
      border-radius: 50px;
      border: 1px solid #6c6c6c;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #b2b2b2;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      line-height: 30px;
      .left {
        height: 100%;
        width: 100%;
        border-radius: 30px;
        flex: 1;
        &:hover {
          background-color: #2d2d2d;
          cursor: default;
        }
      }
      .right {
        height: 100%;
        flex: 1;
        border-radius: 30px;
        &:hover {
          cursor: default;
          background-color: #2d2d2d;
        }
      }
    }
  }
}
.active {
  background-color: #6c6c6c !important;
  color: #fff !important;
}
</style>